import React, { useEffect, useState, useRef } from 'react'
import { useInViewport } from 'ahooks'
import styles from './index.less'
function Index({ children, img }) {
  const box = useRef()
  const [isShow, setIsShow] = useState(false)
  const inViewPort = useInViewport(() => box.current);
  useEffect(() => {
    if (inViewPort) {
      if (!isShow) {
        setIsShow(true)
      }
    }
  }, [inViewPort])

  return (
    <div ref={box} className={styles.box}>
      {isShow && <img src={img} ></img>}
    </div>
  )
}

export default Index
